<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="./jquery-1.12.4.js"></script>
    <script>
        function send() {
            var text = $("#text").val();
            $("#chat").append("<li>我说：" + text + "</li>");
            $.ajax({
                url: "http://localhost:8080/api/generate",
                type: "post",
                data: { userPrompt: text, maxTokens: 100 },
                success: function(data) {
                    if (data.output && data.output.text) {
                        $("#chat").append("<li>AI说:" + data.output.text + "</li>");
                    } else {
                        $("#chat").append("<li>AI说:未能生成有效的响应</li>");
                    }
                    $("#text").val(""); // 清空输入框内容
                },
                error: function(error) {
                    $("#chat").append("<li>AI说:发生错误 - " + error.responseText + "</li>");
                }
            });
        }
    </script>
</head>
<body>
<div id="main">
    <ul id="chat">
        <li>你好,我是AI助手</li>
    </ul>
    <div id="input">
        <input type="text" id="text" placeholder="请输入内容"/>
        <button id="send" onclick="send()">发送</button>
    </div>
</div>
</body>
</html>